<template>
  <div>
    <van-field
      readonly
      clickable
      label="出生日期"
      :value="date"
      placeholder="请选择出生日期"
      @click="show = true"
      :rules="[{ required: true, message: '请选择出生日期' }]"
    />

    <van-calendar v-model="show" :min-date='minDate' :default-date='defaultDate' @confirm="onConfirm" get-container="body"/>
  </div>
</template>

<script>
import Bus from "@/views/userInfo/components/bus";
export default {
  data() {
    return {
      date: this.value,
      show: false,
      minDate: new Date('1900/01/01'),
      defaultDate: new Date()
    };
  },
  props: {
    value: {}
  },
  computed: {

  },
  watch:{
    value(val) {
      this.date = val ? val : "";
    }
  },
  created() {
    const _this = this;
  },
  destroyed() {},
  methods: {
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      this.$emit("input", this.formatDate(date));
      this.show = false;
      this.date = this.formatDate(date);
    }
  },
  components: {}
};
</script>

<style lang='scss'>
</style>
